<script setup lang="ts">
import AmountCard from '@/views/dashboard/common/AmountCard.vue'
import { onMounted, ref } from 'vue'
import { invoiceStatisticsBalanceApi } from '@/api/invoice-api'
import type { ResultData } from '@/api/service'

const amount = ref(0)
const selectedYear = ref<string>(new Date().getFullYear().toString())

const handleYearChange = (year: string | null) => {
  if (year) {
    updateBalanceData(year)
  }
}

const updateBalanceData = (year: string) => {
  invoiceStatisticsBalanceApi(year).then((res: ResultData<number>) => {
    amount.value = res.data
  })
}

onMounted(() => {
  updateBalanceData(selectedYear.value)
})
</script>

<template>
  <div class="year-balance-card">
    <amount-card :amount="amount">
      <div class="card-header">
        <el-date-picker
          style="width: 120px"
          :clearable="false"
          v-model="selectedYear"
          type="year"
          placeholder="选择年份"
          format="YYYY"
          value-format="YYYY"
          @change="handleYearChange"
        />
      </div>
    </amount-card>
  </div>
</template>

<style scoped>
.year-balance-card {
  position: relative;
}

.card-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 12px;
  margin-right: 10px;
}
</style>